<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>首页</title>
		<link rel="stylesheet" href="../static/css/bootstrap.css">
		<link rel="stylesheet" href="../static/css/index.css">
		<script src="../static/js/jquery.js"></script>
		<script src="../static/js/bootstrap.js"></script>
		<script src="../static/js/index.js"></script>
		<script src="../static/js/sweeralert.min.js"></script>
	</head>
	<body>
		<!-- 页面上的最上面导航 -->
		<nav class="navbar navbar-default">
			<div class="navbar-header" style="margin-left: 50px;margin-top: -10px">
				<a href="/index/toIndex"><h3>家政服务系统</h3></a>
			</div>
			
			<div>
				<ul class="nav navbar-nav">
					<li>
						<a href="/index/toIndex">
							<span class="glyphicon glyphicon-home"></span>
							首页
						</a>
					</li>
					<li class="register">
						<a href="/user/toRegister">
							<span class="glyphicon glyphicon-user"></span>
							注册
						</a>
					</li>
					<li class="log-in">
						<a href= "/user/toLogin" >
							<span class="glyphicon glyphicon-log-in"></span>
							登录
						</a>
					</li>
					<li class="log-out">
						<a href= "/user/logout" >
							<span class="glyphicon glyphicon-log-out"></span>
							退出
						</a>
					</li>
					<li class="space">
						<a href="#">个人中心</a>
						<ul class="next-menu">
							<li>
								<a href="/person/toPerson">个人资料</a>
							</li>
							<li>
								<a href="/order/toOrder">我的订单</a>
							</li>
							<li>
								<a href="/app/toCmApp">我的预约</a>
							</li>
						</ul>
					</li>
					<li class="space">
						<a href="#">家政人员中心</a>
						<ul class="next-menu">
							<li>
								<a href="/hk/toHkPerson">商家资料</a>
							</li>
							<li>
								<a href="/app/toHkApp">预约列表</a>
							</li>
							<li>
								<a href="/order/toHkOrder">我的订单</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</nav>
		<div class="container">
			<div class="search">
				<div class="input-group">
					<form action="">
						<input type="text" class="search-input form-control">
					</form>
					<span class="search-btn input-group-addon btn btn-default">搜索</span>
				</div>
			</div>

			<div class="main">
				<div>
					<div class="col-md-3 type">

						<ul class="list-group col-md-12 big-type">

						</ul>

<!--						<ul style="margin-top: 40px" class="recommend list-group col-md-12">-->
<!--							<li style="text-align: center; font-weight: bold; font-size: 16px" class="list-group-item">个性推荐</li>-->
<!--						</ul>-->
					</div>
				
					<div class="col-md-6 middle">
						<div id="myCarousel" class="carousel slide">
							<!-- 轮播（Carousel）指标 -->
							<ol class="carousel-indicators">
								<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
								<li data-target="#myCarousel" data-slide-to="1"></li>
								<li data-target="#myCarousel" data-slide-to="2"></li>
							</ol>

							<!-- 轮播（Carousel）项目 -->
							<div class="carousel-inner">
								<div class="item active">
									<img src="../static/images/carousel01.png" alt="First slide">
								</div>
								<div class="item">
									<img src="../static/images/carousel02.png" alt="Second slide">
								</div>
								<div class="item">
									<img src="../static/images/carousel03.png" alt="Third slide">
								</div>
							</div>
							<!-- 轮播（Carousel）导航 -->
							<a class="carousel-control left" href="#myCarousel" data-slide="prev"> 
								<span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
							</a>
							<a class="carousel-control right" href="#myCarousel" data-slide="next">
								<span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
							</a>
						</div>

						<!--家政人员列表项-->
						<div class="housekeeper-list clearfix">
							<div class="housekeeper-list-hour clearfix"><span>家庭服务</span></div>
							<div class="housekeeper-list-repair clearfix"><span>维修</span></div>
							<div class="housekeeper-list-move clearfix"><span>搬运</span></div>
						</div>
					</div>
					
					
					<div class="col-md-3 appoint">
						<h4>预约服务</h4>
						
						<form action="#" role="form">
							<div class="form-group">

								<div class="input-line">
									<input id="app_time" type="date" class="form-control" placeholder="请选择时间">
								</div>

								<div class="input-line">
									<select class="form-control" id="app_type">
										<option selected="selected">请选择服务类型</option>
										<option>小时工</option>
										<option>月嫂</option>
										<option>护工</option>
										<option>长期雇佣</option>
									</select>
								</div>
								
								<div>
									<div class="col-md-6 input-line">
										<select class="form-control" id="app_address_city">
											<option selected="selected">请选择城市</option>
											<option>六安</option>
										</select>
									</div>
									
									<div class="col-md-6 input-line">
										<select class="form-control" id="app_address_area">
											<option selected="selected">请选择地区</option>
											<option>裕安区</option>
											<option>金安区</option>
											<option>开发区</option>
											<option>叶集区</option>
											<option>霍邱县</option>
											<option>金寨县</option>
											<option>霍山县</option>
											<option>舒城县</option>
										</select>
									</div>
								</div>
								
								<div class="input-line">
									<input id="app_address_detail" type="text" class="form-control" placeholder="请输入详细地址">
								</div>
								
								<div class="input-line">
									<input id="app_phone" type="text" class="form-control" placeholder="请输入联系方式">
								</div>
								
								<div class="input-line">
									<button id="mkAppSubmit" class="btn btn-primary btn-block">立即发布</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		

	</body>
</html>
<script>
	var curWwwPath = window.location.href;
	var pathName = window.location.pathname;
	var ctx = curWwwPath.substring(0,curWwwPath.indexOf(pathName));

    $("#mkAppSubmit").click(function () {
        if (!testFull()) {
            alert("请将预约的内容填写完整!");
		} else {
			var url = ctx + "/app/mkApp";
			var appTypeData= $("#app_type").val();
			var appAddressCityData = $("#app_address_city").val();
			var appAddressAreaData = $("#app_address_area").val();
			var appAddressDetailData = $("#app_address_detail").val();
			var appPhoneData = $("#app_phone").val();
			var appTime = $("#app_time").val();
			var data = "app_type=" + appTypeData + "&app_address_city=" + appAddressCityData + "&app_address_area=" +
				appAddressAreaData + "&app_address_detail=" + appAddressDetailData + "&app_phone=" +appPhoneData +
				"&app_time=" + appTime;
			$.ajax({
				"url": url,
				"data": data,
				"type": "Post",
				"dataType": "json",
				"success": function (json) {
					if (json.state == 200) {
						alert("预约成功!");
					} else if (json.state == 406) {
						alert(json.message);
					} else if (json.state == 407) {
						alert(json.message);
						window.location.href = "/user/toLogin";
					}
				}
			})
		}
    })

	// 用于校验发布预约的内容是否填写完整, 如果填写不完整会返回 false,否则返回 true
	function testFull() {
        var appTypeData= $("#app_type").val();
        var appAddressCityData = $("#app_address_city").val();
        var appAddressAreaData = $("#app_address_area").val();
        var appAddressDetailData = $("#app_address_detail").val();
        var appPhoneData = $("#app_phone").val();
        if (appTypeData == "请选择服务类型" || appAddressCityData == "请选择城市" || appAddressAreaData == "请选择地区" || appAddressDetailData == "" || appPhoneData == "") {
			return false;
		} else {
            return true;
		}
    }
</script>